<template>
  <div class="app-container">
    <div class="button">
      <el-row style="padding-bottom: 1rem">
        <el-col>
          <div class="grid-content bg-purple-dark">
            <el-upload
              class="upload-demo"
              ref="upload"
              accept=".jpg,.png,.jpeg"
              :on-change="handleChange"
              :action="uploadUrl"
              :limit="1"
              :auto-upload="false"
            >
              <el-button type="primary" slot="trigger">添加轮播图</el-button>
            </el-upload>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-table
      id="myform"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="图片" align="center">
        <template slot-scope="scope">
          <el-image :src="byteToArray(scope.row.imgPath)"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="100rem">
        <template slot-scope="scope">
          <el-button type="danger" size="small" @click="handleClean(scope.row.carouselId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import $ from "@/api/project";

export default {
  data() {
    return {
      value: "",
      state: 0,
      list: [],
      val: "",
      roleId: "",
      userNumber: "",
      listLoading: true,
      options: [],
      roleList: [],
      uploadUrl: '',
      uploadfile: "",
    };
  },
  created() {
    this.find();
  },
  methods: {
    handleChange(file) {
      this.uploadfile = file
      this.handleSubmit()
    },
    handleSubmit() {
      if (this.uploadfile == "") {
        this.$message({
          message: "请先选择图片",
          type: 'error'
        })
        return
      }
      this.listLoading = true;
      let formData = new FormData()
      formData.append('file', this.uploadfile.raw);
      $.pictureUpload(formData).then(res => {
        if (res.success) {
          $.insertCarousel({imgPath:res.data}).then(resp=>{
            this.find()
            this.$message({
              message: "上传成功",
              type: 'success'
            })
          })
        }
      })
    },
    byteToArray(path) {
      return  "http://localhost:8090/product/imgInfo?path="+path
    },
    find() {
      this.listLoading = true;
      $.findAllCarousel().then(res => {
          console.log(res.data)
          this.list = res.data
          this.listLoading = false
        }
      );
    },
    handleClean(id) {
      this.$confirm("此操作将删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          //console.log(id)
          $.deleteCarousel({carouselId:id}).then(response => {
            this.$message({
              type: "success",
              message: "已删除!"
            });
            this.find();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
  }
};
</script>
<style scoped>
.button {
  padding-left: 1rem;
}
</style>
